<template>
  <!-- 饼图容器：使用vw/vh适配大屏 -->
  <div class="pie-chart-container" ref="chartRef"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'PieChart',
  props: {
    // 接收父组件传入的饼图数据
    pieData: {
      type: Array,
    },
    // 图表标题（可选）
    // title: {
    //   type: String,
    //   default: '隐患类型分布'
    // }
  },
  data() {
    return {
      chart: null, // ECharts实例
      // 缓存当前屏幕宽度，用于动态调整配置
      screenWidth: window.innerWidth
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chart) this.chart.dispose();
  },
  methods: {
    // 初始化饼图
    initChart() {
      const chartDom = this.$refs.chartRef
      this.chart = echarts.init(chartDom)
      this.updateChartOptions(); // 单独抽离配置，便于动态更新
    },

    // 生成自适应配置项（核心）
    getAdaptiveOptions() {
      const legendFontSize = (14 / 1920) * this.screenWidth;

      return {
        // 饼图配置项
        // const option = {
          // 标题配置
          // title: {
          //   text: this.title,
          //   left: 'center',
          //   top: 0,
          //   textStyle: {
          //     color: '#fff', // 适配深色背景
          //     fontSize: 16
          //   }
          // },
          // 图例配置（右侧显示）
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: "0",
            top: 'center',
            textStyle: {
              color: '#ccc', // 图例文字颜色
              fontSize: legendFontSize // 图例文字：用px2font
            },
            itemWidth: legendFontSize, // 图标宽度（按需调整，如12、16等）
            itemHeight: legendFontSize, // 图标高度（与宽度保持一致，实现正方形）
            // 格式化图例名称（可选）
            formatter: function(name) {
              // 找到对应数据的value，显示百分比
              const item = this.pieData.find(i => i.name === name)
              const total = this.pieData.reduce((sum, item) => sum + item.value, 0)
              const percent = ((item.value / total) * 100).toFixed(1)
              return `${name} ${percent}%`
            }.bind(this)
          },
          // 提示框配置（鼠标悬停显示详情）
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)', // a:系列名, b:数据名, c:数值, d:百分比
            textStyle: {
              fontSize: legendFontSize // 提示框文字：用px2font
            }
          },
          // 系列配置（饼图核心）
          series: [
            {
              name: '分类统计',
              type: 'pie',
              center: ['30%', '50%'], // 饼图位置（左35%，居中50%）
              roseType: 'radius',
              avoidLabelOverlap: false, // 避免标签重叠
              itemStyle: {
                // 扇区样式
                borderRadius: 0, // 扇区圆角
                borderColor: '#0a2b5c', // 扇区间隔颜色（与背景色一致）
                borderWidth: 0 // 间隔宽度
              },
              // 标签（扇区内部文字）
              label: {
                show: false,
                position: 'center',
                textStyle: {
                  fontSize: legendFontSize // 内部标签：用px2font
                }
              },
              // 标签线（连接扇区和外部文字）
              labelLine: {
                show: true,
                lineStyle: {
                  color: '#ccc' // 标签线颜色
                }
              },
              // 选中样式（鼠标点击扇区时）
              emphasis: {
                label: {
                  show: true,
                  fontSize: legendFontSize, // 选中状态字体：用px2font
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              // 饼图数据（从props接收）
              data: this.pieData
            }
          ],
          // 颜色配置（适配大屏深色主题）
          color: [
            '#1890ff', // 主色调-蓝
            '#36d399', // 绿
            '#f6ad55', // 橙
            '#fc8181', // 红
            '#805ad5'  // 紫
          ]
        // },
        // this.chart.setOption(option)
      }
    },

    // 更新图表配置
    updateChartOptions() {
      const option = this.getAdaptiveOptions();
      this.chart.setOption(option);
    },

    // 处理窗口 resize
    handleResize() {
      // 防抖：避免频繁触发
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.screenWidth = window.innerWidth; // 更新屏幕宽度
        this.chart && this.chart.resize(); // 调整图表尺寸
        this.updateChartOptions(); // 重新生成自适应配置
      }, 100);
    }
  },
  watch: {
    // 监听数据变化，动态更新图表
    pieData: {
      deep: true,
      handler(newData) {
        this.chart.setOption({
          series: [
            {
              data: newData
            }
          ]
        })
      }
    },
    // 监听标题变化
    title(newTitle) {
      this.chart.setOption({
        title: {
          text: newTitle
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pie-chart-container {
  width: 100%;
  height: px2vh(228); // 高度基于视口高度，适配大屏
  background-color: transparent; // 透明背景，融入大屏主题
}
</style>

